
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>房屋租赁咨询</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link rel="stylesheet" href="css/bootstrap.min.css" />
 <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
 <style>
  body{
  background:none repeat scroll 0 0 #2E363F;
  font-family:'Open Sans', sans-serif;
  color:#08c;
  font-size:12px;
 }
 #attach1,#attach2,#attach3{
  color:red;
  height:18px;
 }

  
 </style>
</head>
<body>
<div class="container-fluid">
 <div class="row-fluid">
  <div class="span12">
   <div class="widget-box">
    <div class="widget-title">
    <h5>请留言您的问题</h5>
   </div>
   <hr/>
    <div class="widget-content">
     <form action="<%=request.getContextPath() %>/consult?method=email&to=rent" class="form-horizontal" name="form1" method="post">
      <div class="control-group">
        <input type="text" class="span12" name="phone" placeholder="your phone">
           <div id="attach1" ></div>
     
      </div>

      <div class="control-group">
        <input type="text" class="span12"  name="email" placeholder="your email">
        <div id="attach2" ></div>
      </div>
      <div class="control-group">
        <textarea class="span12"  rows="10" cols="20" name="content" placeholder="请在此输入留言内容，我们会尽快回复您"></textarea>
        <div id="attach3" ></div>
      </div>
      <div class="div-btn">
        <button class="btn btn-primary" type="submit" onclick="return check()">提交问题</button>
      </div>
     </form>
    </div>
   </div>
  </div>
 </div>
</div>
<script src="js/jquery.min.js"></script> 
<script>
var regexp=/^1[0-9]{10}/;
var regexp2=/[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+/;
$("input[name='phone']").blur(function(){
	if(form1.phone.value==""){
		$("#attach1").append("不能为空");
		return;
	}
	if(!regexp.test(form1.phone.value)){
		$("#attach1").append("手机号格式不正确");
		return;
	}
})
$("input[name='phone']").focus(function(){
	$("#attach1").empty();

});
$("input[name='email']").blur(function(){
	if(form1.email.value==""){
		$("#attach2").append("不能为空");
		return;
	}
	if(!regexp2.test(form1.email.value)){
		$("#attach2").append("邮箱格式不正确");
		return;
	}
});
$("input[name='email']").focus(function(){
	$("#attach2").empty();
});

$("textarea").blur(function(){
	if(form1.content.value==""){
		$("#attach3").append("不能为空");
		return;
	}
});
$("textarea").focus(function(){
	$("#attach3").empty();
});
/*判断不为空
 * 校验手机号，邮箱地址
 */

function check(){
	if(form1.phone.value==""){
		$("#attach1").empty();
		$("#attach1").append("不能为空");
		return false;
	}
	if(!regexp.test(form1.phone.value)){
		$("#attach1").empty();
		$("#attach1").append("手机号格式不正确");
		return false;
	}
	if(form1.email.value==""){
		$("#attach2").empty();
		$("#attach2").append("不能为空");
		return false;
	}
	if(!regexp2.test(form1.email.value)){
		$("#attach2").empty();
		$("#attach2").append("邮箱格式不正确");
		return false;
	}
	if(form1.content.value==""){
		$("#attach3").empty();
		$("#attach3").append("不能为空");
		return false;
	}
	return true;
}
  
</script>

</body>
</html>